<!doctype html>
<html>
{{{head}}}
<body class="homepage">

<div class="hero-wrapper">
    <div class="body-width-115f6 hero-inner-556fe">
        <img src="img/chesspieces/wikipedia/bK.svg" alt="Black King" />
        <h1>chessboard.js</h1>
        <h3>The easiest way to embed a chess board on your site.</h3>
        <a href="releases/chessboardjs-1.0.0.zip">Download v1.0.0</a>
    </div>
</div>

<nav id="start" class="homepage-nav-b9ecc">
    <div class="body-width-115f6 navbar-a57cc hover-effect">
        <a href="#start"><span class="piece">&#9823;</span> Getting Started</a>
        <a href="examples"><span class="piece">&#9819;</span> Examples</a>
        <a href="docs"><span class="piece">&#9820;</span> Documentation</a>
        <a href="download"><span class="piece">&#9822;</span> Download</a>
    </div>
</nav>

<main>

<section class="homepage-section-88e4a body-width-115f6">
<div class="col-11bcf">
    <h2>As easy as two lines.</h2>
    <h4>HTML</h4>
    <pre class="prettyprint">&lt;div id="board1" style="width: 400px"&gt;&lt;/div&gt;</pre>
    <h4>JavaScript</h4>
    <pre class="prettyprint">var board1 = Chessboard('board1', 'start')</pre>
</div>
<div class="col-11bcf">
    <div id="board1" style="width: 400px"></div>
</div>
</section>

<section class="homepage-section-88e4a body-width-115f6">
<div class="col-11bcf">
    <h2>Customize with a powerful API.</h2>
    <h4>HTML</h4>
<pre class="prettyprint">
&lt;div id="board2" style="width: 400px"&gt;&lt;/div&gt;
&lt;button id="startBtn"&gt;Start Position&lt;/button&gt;
&lt;button id="clearBtn"&gt;Clear Board&lt;/button&gt;
</pre>
    <h4>JavaScript</h4>
<pre class="prettyprint">{{{example2}}}</pre>
</div>
<div class="col-11bcf">
    <div id="board2" style="width: 400px"></div>
    <button id="startBtn">Start Position</button>
    <button id="clearBtn">Clear Board</button>
</div>
</section>

</main>

{{{footer}}}

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/prettify.min.js"></script>
{{{chessboardJsScript}}}
<script>
;(function () {
  function isTouchDevice () {
    return ('ontouchstart' in document.documentElement)
  }

  function init () {
    prettyPrint()

    // example 1
    var board1 = Chessboard('board1', 'start')

    // example 2
    {{{example2}}}

    // prevent "browser drag" of the black king
    $('.hero-inner-556fe img').on('mousedown', function (evt) { evt.preventDefault() })

    // prevent hover problems on touch devices
    if (isTouchDevice()) {
      $('.navbar-a57cc').removeClass('hover-effect')
    }
  }

  $(document).ready(init)
})()
</script>
</body>
</html>
